<template>
  <view class="wrap">
		 <view class="header-img-box">
			 <image class="img" src="/static/my/vip_back.png"></image>
		 </view>
    <top-tab tabTitle="会员收益" @backClick="backClick">
			 <view slot="tab-right" style="font-size: 24rpx">等级说明</view>
		 </top-tab>
		 <view class="vip-title">
			 <view class="img-logo-title">
				 <image class="vip-logo" src="/static/my/vip_logo.png" mode="aspectFill"></image>
				 <view class="title">我的会员权益</view>
				 <image class="vip-logo" src="/static/my/vip_logo.png" mode="aspectFill"></image>
			 </view>
			 <view class="subhead">开启会员认证畅想一下权益</view>
		 </view>
		 <view class="main">
			<view class="inn-title-back">
				<view v-for="(item,index) in imgBackList" :key="item.id">
					<view class="img-back">
						<image class="img" :src="item.url"></image>
					</view>
					<view class="img-title">{{item.text}}</view>
				</view>			 
			</view>
			<view class="add-vip-box">
				<view class="logo-add-vip-title">
					<view class="logo-back"></view>
					<view class="title">开通会员</view>
				</view>
				<view class="purchase" @click="buyRecord">购买记录</view>
			</view>
			<!-- 轮播 -->
				<view class="add-vip-btn-box">
					<swiper :circular="true" style="border-radius: 8px;overflow: hidden;"
					 duration="400"  previous-margin="0px" next-margin="230px">
						<swiper-item v-for="(item,index) in addVip" :key="item.id" class="swiper-add">
							<view class="item-money">
								<view class="day-vip">{{item.name}}</view>
								<view class="money">{{item.money}}<text class="unit">元</text></view>
								<view class="top-price">{{item.contunt}}</view>
								<view class="once-open" @click="addPay">立即开通</view>
								<view class="postion-left"></view>
								<view class="postion-right"></view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			<!-- 支付弹窗 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="16rpx">
				<view class="popup-main">
					<view class="title">请选择支付方式：</view>
					<view class="list-box" v-for="(item,index) in payList" :key="item.id">
						<view class="balance-wrap">
							<image :src="item.url" class="img"></image>
							<view class="item-name">{{item.name}}</view>
						</view>
						<radio-group @change="radioChange(index)">
							<label class="uni-list-cell uni-list-cell-pd">
								<radio :checked="index === current" />
							</label>
						</radio-group>
					</view>
				</view>
			</uni-popup>
		 </view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {
				current: 0,
				payList: [
					{ id: 1, name: '钱包余额', url: '/static/my/balance.png'},
					{ id: 2, name: '支付宝', url: '/static/my/alipay.png'},
					{ id: 3, name: '微信', url: '/static/my/wx.png'}
				],
				addVip: [
					{ id: 1, name: "日费会员", money: 20, contunt: "￥199.00"},
					{ id: 2, name: "月费会员", money: 50, contunt: "￥199.00"},
					{ id: 3, name: "年费会员", money: 99, contunt: "￥199.00"},
					{ id: 4, name: "日费会员", money: 10, contunt: "￥199.00"},
					{ id: 5, name: "日费会员", money: 5, contunt: "￥199.00"}
				],
				imgBackList: [
					{ id: 1, text: '积分获取', url: '/static/my/integral.png'},
					{ id: 1, text: '免费保障', url: '/static/my/safeguard.png'},
					{ id: 1, text: '会员礼卷', url: '/static/my/gift.png'},
					{ id: 1, text: '生活特权', url: '/static/my/safeguard.png'},
				],
				statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
			}
    },
  onShow() {},
  methods: {
		// 购买记录
		buyRecord() {
			uni.navigateTo({
				url: '/pages/my/buy_vip/buy_record'
			})
		},
		// 支付
		goPay() {
			uni.navigateTo({
				url: '/pages/my/buy_vip/pay_succeed'
			})
		},
		// 单选框事件
		radioChange(e) {
			this.current = e
		},
		// 打开弹窗
		addPay() {
			 this.$refs.popup.open('')
		},
		// 返回上一页
		backClick() {
			uni.switchTab({
			    url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.header-img-box{
		width: 100%;
		height: 518rpx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	/deep/ .top-tabbar-wrap{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.15);
	}
	.vip-title{
		.img-logo-title{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 34rpx;
			.vip-logo{
				width: 42rpx;
				height: 24rpx;
			}
			.title{
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #8E2FBA;
				margin: 0 20rpx;
			}
		}
		.subhead{
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 20rpx 0 40rpx 0;
			text-align: center;
		}
	}
	.main{
		padding: 0 27rpx;
		.inn-title-back{
			width: 100%;
			height: 174rpx;
			background: #FFFFFF;
			box-shadow: 0px 3rpx 13rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 47rpx;
			.img-back{
				width: 92rpx;
				height: 92rpx;
				background: #F8E4FF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				.img{
					display: block;
					width: 53rpx;
					height: 59rpx;
				}
			}
			.img-title{
				font-size: 22rpx;
				margin-top: 18rpx;
			}
		}
		.add-vip-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 52rpx 0 44rpx 0;
			.logo-add-vip-title{
				display: flex;
				align-items: center;
				.logo-back{
					width: 4rpx;
					height: 40rpx;
					background: #B73DF0;
					border-radius: 2rpx;
				}
				.title{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 20rpx;
				}
			}
			.purchase{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
				padding-right: 33rpx;
			}
		}
		.add-vip-btn-box{
			/deep/ swiper {
				// width: 191rpx !important;
				height: 170 !important;
			}
			.swiper-add:first-child{
				.once-open{
					background: linear-gradient(90deg, #B83DF1, #852CAE) !important;
					-webkit-text-fill-color: #FFFFFF;
				}
			}
			.item-money{
				width: 191rpx;
				height: 300rpx;
				background: #FEE5C9;
				border-radius: 7rpx 7rpx 0 0;
				text-align: center;
				position: relative;
				// .once-open:nth-of-type(1){
				// 	color: #FFFFFF !important;
				// 	background: linear-gradient(90deg, #B83DF1, #852CAE) !important;
				// }
				.day-vip{
					width: 112rpx;
					height: 30rpx;
					background: #F29B76;
					border-radius: 0px 0px 7rpx 7rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
					margin: auto;
				}
				.money,.top-price{
					font-size: 83rpx;
					font-family: Arial;
					font-weight: 600;
					color: rgba(255, 255, 255, 0.78);
					opacity: 0.87;
					text-shadow: 0px 1px 1px rgba(74, 74, 74, 0.52);
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					margin: 33rpx 0 10rpx 0;
					.unit{
						font-size: 24rpx;
					}
				}
				.top-price{
					font-size: 24rpx;
					margin:0;
					text-decoration:line-through;
					padding-bottom: 16rpx;
					// padding-bottom: 40rpx;
					border-bottom: 1rpx solid #ECAF8D;
				}
				
				.once-open{
					height: 85rpx;
					line-height: 85rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #542F2B 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.postion-left{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					left: -7px;
					top:68%;
				}
				.postion-right{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					right: -7px;
					top:68%;
				}
			}
		}
		.popup-main{
			width: 100%;
			padding-bottom: 50px;
			.title{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 178rpx 30rpx 42rpx 30rpx;
			}
			.list-box{
				height: 110rpx;
				border-bottom: 1rpx solid #EEEEEE;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.balance-wrap{
					display: flex;
					align-items: center;
					.img{
						width: 55rpx;
						height: 55rpx;
					}
					.item-name{
						font-size: 28rpx;
						color: #333333;
						margin-left: 30rpx;
					}
				}
			}
			.footer{
				margin-top:158rpx;
				margin-bottom: env(safe-area-inset-bottom);
				padding: 0 30rpx;
				.btn-pay{
					width: 100%;
					height: 98rpx;
					line-height: 98rpx;
					text-align: center;
					background: linear-gradient(90deg, #B83DF1, #852CAE);
					border-radius: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>
